<template>
	<view class="content">
		<view class="text-area">
			<scroll-view class="scroll">
				<!-- 轮播 -->
				<swiper class="screen-swiper square-dot"  :indicator-dots="true" :circular="true"
				 :autoplay="true" interval="6000" duration="600" :style="[{animation: 'show 0.2s 1'}]">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image class="img" :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
					</swiper-item>
				</swiper>
			</scroll-view> 
			<view class="gr">
				<navigator url="../processCate/processCate"></navigator>
			</view>
			<!-- 常用服务 -->
			<u-grid :col="2">
					<u-grid-item @tap="goback3()">
						<u-icon name="/static/home/128/duanxin.png" :size="160"></u-icon>
						<view class="grid-text">消息</view>
					</u-grid-item>
					<u-grid-item @tap="goback2()">
						<u-icon name="/static/home/128/wendang.png" :size="160"></u-icon>
						<view class="grid-text">项目</view>
					</u-grid-item>
					<u-grid-item @tap="goback1()">
						<u-icon name="/static/home/128/hetong.png" :size="160"></u-icon>
						<view class="grid-text">合同</view>
					</u-grid-item>
					<u-grid-item @tap="goback()">
						<u-icon name="/static/home/128/toupiao.png" :size="160"></u-icon>
						<view class="grid-text">审核</view>
					</u-grid-item>
			</u-grid>
			<!-- <u-icon name="more-circle-fill" color="#2979ff" size="100"></u-icon> -->
		</view>
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello uView',
				tabbar: '',
				swiperList: [ 
					{id:1,type: 'image',url: '/static/banner/3.jpg', link: ''},
					{id:2,type: 'image',url: '/static/banner/5.jpg', link: ''},
					{id:3,type: 'image',url: '/static/banner/02.jpg', link: ''},
					{id:4,type: 'image',url: '/static/banner/2.jpg', link: ''},
				],
			}
		},
		onLoad() {
			/**
			 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
			 */
			this.tabbar = this.$store.state.tabbar
		},
		methods: {
			goback(){
				this.$Router.push({name:'audit'})
			},
			goback1(){
				this.$Router.push({name:'hetong'})
			},
			goback2(){
				this.$Router.push('/pages/xiangmu/xiangmu')
			},
			goback3(){
				this.$Router.push('/pages/newsIndex/newsIndex')
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.img {
		width:100%;
		height:400rpx;
	}
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
		}
	.gr {
		height:100rpx;
		width:200rpx;
		margin-top: 4rpx;
	}
</style>
